<!--
 * @Descripttion: (报警记录表/cks_alarm_rec)
 * @Author: (admin)
 * @Date: (2025-7-23)
-->
<template>
  <div>
    <!-- 查询表单 -->
    <el-form style="margin-left: 5px;margin-top: 10px;" :model="queryParams" label-position="right" inline
      ref="queryRef" v-show="showSearch" @submit.prevent>
      <el-form-item :label="$t('alarm.cksalarmrecordPage.page.productionLineCode')" prop="lineCode">
        <!-- <el-input v-model="queryParams.lineCode" :placeholder="$t('alarm.cksalarmrecordPage.page.productionLineCodeInput')" clearable style="width:240px" /> -->
        <el-select clearable style="width: 260px" v-model="queryParams.lineCode"
          @change="queryParams.stationCode = ''; state.options.workstationCodeOptions = state.options.productionLineList.find(item => item.lineCode === $event)?.workStation || []"
          :placeholder="$t('alarm.cksalarmrecordPage.page.productionLineCodeInput')">
          <el-option v-for="item in options.productionLineOptions" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('alarm.cksalarmrecordPage.page.stationCode')" prop="stationCode">
        <!-- <el-input v-model="queryParams.stationCode" :placeholder="$t('alarm.cksalarmrecordPage.page.stationCodeInput')" clearable style="width: 240px" /> -->
        <el-select clearable style="width: 260px" v-model="queryParams.stationCode"
          :placeholder="$t('alarm.cksalarmrecordPage.page.stationCodeInput')">
          <el-option v-for="item in options.workstationCodeOptions" :key="item.WorkstationCode"
            :label="item.WorkstationCode" :value="item.WorkstationCode" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('alarm.cksalarmrecordPage.page.searchContent')" prop="searchContent">
        <el-input v-model="queryParams.searchContent"
          :placeholder="$t('alarm.cksalarmrecordPage.page.searchContentInput')" clearable style="width: 240px" />
      </el-form-item>

      <el-form-item :label="$t('alarm.cksalarmrecordPage.page.dateRange')" prop="dateRange">
        <el-date-picker style="width: 360px" v-model="queryParams.dateRange" type="datetimerange"
          :default-time="defaultTime" :shortcuts="shortcuts" value-format="YYYY-MM-DD HH:mm:ss" range-separator="-" />
      </el-form-item>

      <el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="15" class="mb10">
      <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
      highlight-current-row>
      <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" align="center"
        :width="col.width || 'auto'" :show-overflow-tooltip="true" />
    </el-table>

    <!-- 分页 -->
    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script setup name="cksalarmrecord">
import { listCksAlarmRecord } from '@/api/business/cksalarmrecord.js'
import { queryProductionLinePlcInfo } from '@/api/business/plcconfig.js'
import dayjs from 'dayjs'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const lang = computed(() => useAppStore().lang)


const { proxy } = getCurrentInstance()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
const loading = ref(false)
const showSearch = ref(true)
const today = dayjs()

// 时间范围快捷选项
const shortcuts = [
  {
    text: proxy.$t('common.today'),
    value: () => {
      const start = new Date().setHours(0, 0, 0, 0)
      const end = new Date().setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
  {
    text: proxy.$t('common.thisWeek'),
    value: () => {
      const start = new Date()
      const end = new Date().setHours(23, 59, 59, 999)
      start.setHours(0, 0, 0, 0)
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: proxy.$t('common.thisMonth'),
    value: () => {
      const start = new Date()
      const end = new Date().setHours(23, 59, 59, 999)
      start.setHours(0, 0, 0, 0)
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: proxy.$t('common.last3Month'),
    value: () => {
      const start = new Date()
      const end = new Date().setHours(23, 59, 59, 999)
      start.setHours(0, 0, 0, 0)
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  lineCode: '',
  stationCode: '',
  searchContent: '',
  dateRange: [today.startOf('day').format('YYYY-MM-DD HH:mm:ss'), today.endOf('day').format('YYYY-MM-DD HH:mm:ss')],
})

const columns = ref([
  { visible: true, prop: 'alarmRecordId', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.alarmRecordId'), width: '140px' },
  { visible: true, prop: 'productionLineCode', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.productionLineCode'), width: '140px' },
  { visible: true, prop: 'stationCode', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.stationCode'), width: '150px' },
  { visible: true, prop: 'alarmDBAddr', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.alarmDBAddr'), width: '120px' },
  { visible: true, prop: 'value', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.value'), width: '120px' },
  { visible: true, prop: (lang.value === 'en' ? 'messageUs' : lang.value === 'es-ES' ? 'messageEs' : 'messageCn'), label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.messageCn') },
  { visible: true, prop: 'startTime', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.startTime'), width: '180px' },
  { visible: true, prop: 'endTime', label: proxy.$t('alarm.cksalarmrecordPage.tableColumns.endTime'), width: '180px' },
])

const total = ref(0)
const dataList = ref([])

const state = reactive({
  options: {
    // 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
    productionLineList: [],
    // 产线
    productionLineOptions: [],
    // workstation code
    workstationCodeOptions: [],
  }
});
const { options } = toRefs(state)


function getList() {
  loading.value = true
  const formBody = JSON.parse(JSON.stringify(queryParams));
  proxy.addDateRange(formBody, queryParams.dateRange);
  delete formBody.dateRange;
  listCksAlarmRecord(formBody).then(res => {
    const { code, data } = res
    if (code === 200) {
      dataList.value = data.result
      total.value = data.totalNum
    }
    loading.value = false
  })
}

function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

queryProductionLinePlcInfo().then(res => {
  const { code, data } = res
  if (code == 200) {
    state.options.productionLineList = data;
    state.options.productionLineOptions = data.map(item => ({
      dictLabel: item.lineCode,
      dictValue: item.lineCode
    }));
  }
})

handleQuery()
</script>